<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="main" />
    <title>Accordion tag example</title>
    <gui:resources components="['accordion', 'dataTable', 'richEditor']"/>
</head>

<body>

    <h1>Accordion Demo</h1>

    <h3>Standard Config</h3>
    <gui:accordion>
        <gui:accordionElement title="Accordion element 1">
            Accordion element 1 content
        </gui:accordionElement>
        <gui:accordionElement title="Accordion element 2">
            <img src="${createLinkTo(dir:'/images', file:'thumbsup.jpg')}" alt="thumbs up!"/>
        </gui:accordionElement>
    </gui:accordion>

    <h3>Multiple / Fade: element 2 selected</h3>
    <div style="width:800px">
    <gui:accordion multiple="true" fade="true" vertical="true">
        <gui:accordionElement title="Some text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium metus sed leo iaculis vulputate. Vivamus blandit est sed lectus aliquet pharetra. Nunc nec eros orci, id malesuada eros. Nulla tincidunt, felis et feugiat luctus, est mauris rhoncus justo, eu auctor dolor metus non sem. Integer viverra bibendum justo in porttitor. Suspendisse leo felis, vehicula at tincidunt nec, volutpat vitae nulla. Aliquam erat volutpat. Sed est mauris, venenatis nec molestie sed, fermentum in lacus. Integer laoreet, ligula vel sodales mollis, tortor turpis ullamcorper lacus, non consequat justo quam non ipsum. Nam et arcu ut eros sollicitudin mollis. Quisque eu augue porttitor nisl mollis volutpat et a augue. Morbi feugiat purus non magna sagittis accumsan. Mauris et ante purus. Donec elit lorem, luctus ac dictum in, dapibus eget urna. Nunc dui lorem, vestibulum eu congue sed, bibendum posuere dolor. Phasellus auctor aliquam adipiscing. 
        </gui:accordionElement>
        <gui:accordionElement title="More text" selected="true">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium metus sed leo iaculis vulputate. Vivamus blandit est sed lectus aliquet pharetra. Nunc nec eros orci, id malesuada eros. Nulla tincidunt, felis et feugiat luctus, est mauris rhoncus justo, eu auctor dolor metus non sem. Integer viverra bibendum justo in porttitor. Suspendisse leo felis, vehicula at tincidunt nec, volutpat vitae nulla. Aliquam erat volutpat. Sed est mauris, venenatis nec molestie sed, fermentum in lacus. Integer laoreet, ligula vel sodales mollis, tortor turpis ullamcorper lacus, non consequat justo quam non ipsum. Nam et arcu ut eros sollicitudin mollis. Quisque eu augue porttitor nisl mollis volutpat et a augue. Morbi feugiat purus non magna sagittis accumsan. Mauris et ante purus. Donec elit lorem, luctus ac dictum in, dapibus eget urna. Nunc dui lorem, vestibulum eu congue sed, bibendum posuere dolor. Phasellus auctor aliquam adipiscing. 
        </gui:accordionElement>
        <gui:accordionElement title="And more">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium metus sed leo iaculis vulputate. Vivamus blandit est sed lectus aliquet pharetra. Nunc nec eros orci, id malesuada eros. Nulla tincidunt, felis et feugiat luctus, est mauris rhoncus justo, eu auctor dolor metus non sem. Integer viverra bibendum justo in porttitor. Suspendisse leo felis, vehicula at tincidunt nec, volutpat vitae nulla. Aliquam erat volutpat. Sed est mauris, venenatis nec molestie sed, fermentum in lacus. Integer laoreet, ligula vel sodales mollis, tortor turpis ullamcorper lacus, non consequat justo quam non ipsum. Nam et arcu ut eros sollicitudin mollis. Quisque eu augue porttitor nisl mollis volutpat et a augue. Morbi feugiat purus non magna sagittis accumsan. Mauris et ante purus. Donec elit lorem, luctus ac dictum in, dapibus eget urna. Nunc dui lorem, vestibulum eu congue sed, bibendum posuere dolor. Phasellus auctor aliquam adipiscing. 
        </gui:accordionElement>
    </gui:accordion>
    </div>

    <h3>Bounce / Slow / Multiple</h3>
    <gui:accordion bounce="true" slow="true" multiple="true">
        <gui:accordionElement title="Accordion element 1">
            Accordion element 1 content
        </gui:accordionElement>
        <gui:accordionElement title="Accordion element 2">
            <img src="${createLinkTo(dir:'/images', file:'marshmallow.gif')}" alt="thumbs up!"/>
            <img src="${createLinkTo(dir:'/images', file:'marshmallow.gif')}" alt="thumbs up!"/>
            <img src="${createLinkTo(dir:'/images', file:'marshmallow.gif')}" alt="thumbs up!"/>
            <br/>
            <img src="${createLinkTo(dir:'/images', file:'marshmallow.gif')}" alt="thumbs up!"/>
            <img src="${createLinkTo(dir:'/images', file:'marshmallow.gif')}" alt="thumbs up!"/>
            <img src="${createLinkTo(dir:'/images', file:'marshmallow.gif')}" alt="thumbs up!"/>
        </gui:accordionElement>
    </gui:accordion>
    
    <h3>Bounce / Slow / Persistent</h3>
    <gui:accordion bounce="true" slow="true" persistent="true">
        <gui:accordionElement title="Accordion element 1">
            Accordion element 1 content
        </gui:accordionElement>
        <gui:accordionElement title="Accordion element 2">
            <img src="${createLinkTo(dir:'/images', file:'marshmallow.gif')}" alt="thumbs up!"/>
            <img src="${createLinkTo(dir:'/images', file:'marshmallow.gif')}" alt="thumbs up!"/>
            <img src="${createLinkTo(dir:'/images', file:'marshmallow.gif')}" alt="thumbs up!"/>
            <br/>
            <img src="${createLinkTo(dir:'/images', file:'marshmallow.gif')}" alt="thumbs up!"/>
            <img src="${createLinkTo(dir:'/images', file:'marshmallow.gif')}" alt="thumbs up!"/>
            <img src="${createLinkTo(dir:'/images', file:'marshmallow.gif')}" alt="thumbs up!"/>
        </gui:accordionElement>
    </gui:accordion>

    <h3>Containing a data table and rich editor</h3>
    <gui:accordion>
        <gui:accordionElement title="Data Table">
            <gui:dataTable
            id="dataTable"
            columnDefs="[
            [key:'id', sortable:true, resizeable: true],
            [key:'name', sortable:true, resizeable: true],
            [key:'birthDate', type:'date', sortable:true, resizeable: true],
            [key:'age', type:'number', sortable:true, resizeable: true],
            [key:'netWorth', type:'currency', sortable:true, resizeable: true]
        ]"
            controller="demo" action="dataTableDataAsJSON"
            rowExpansion="true"
            caption="click on a row, and it will expand"
            paginate="true"
            rowsPerPage="5"/>
        </gui:accordionElement>
        <gui:accordionElement title="Rich Editor">
            <gui:richEditor
                id='testEditor'
                value="Edit me!"/>
        </gui:accordionElement>
    </gui:accordion>
</body>
</html>